<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>chat room websocket</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery-3.6.1.min.js" ></script>
</head>
<body class="container" style="width: 60%">
<div class="form-group" ></br>
  <h5>聊天室</h5>
  <textarea id="message_content"  class="form-control"  readonly="readonly" cols="50" rows="10"></textarea>
</div>
<div class="form-group" >
  <label for="in_user_name">用户姓名 &nbsp;</label>
  <input id="in_user_name" value="" class="form-control" /></br>
  <button id="user_join" class="btn btn-success" >加入聊天室</button>
  <button id="user_exit" class="btn btn-warning" >离开聊天室</button>
</div>
<div class="form-group" >
  <label for="in_room_msg" >群发消息 &nbsp;</label>
  <input id="in_room_msg" value="" class="form-control" /></br>
  <button id="user_send_all" class="btn btn-info" >发送消息</button>
</div>


<script type="text/javascript">





  $(function()
  {
    // webSocket地址
    var urlPrefix ='ws://localhost:8080/chat-room/';
    var ws = null;
    // 給加入按鈕添加了一個点击的处理
    $('#user_join').click(function()
    {

      var username = $('#in_user_name').val();
      var url = urlPrefix + username;
      // 创建webSocket
      ws = new WebSocket(url);
      // 添加事件处理
      ws.onopen = function () {
        console.log("建立 websocket 连接...");
      };
      // 服务器发来消息时的处理
      ws.onmessage = function(event){
        //服务端发送的消息
        $('#message_content').append(event.data+'\n');
      };
      // 断开时处理
      ws.onclose = function(){
        $('#message_content').append('用户['+username+'] 已经离开聊天室!');
        console.log("关闭 websocket 连接...");
      }
    });
    //客户端发送消息到服务器
    $('#user_send_all').click(function(){
      var msg = $('#in_room_msg').val();
      if(ws){
        ws.send(msg);
      }
    });
    // 退出聊天室
    $('#user_exit').click(function(){
      if(ws){
        ws.close();
      }
    });
  })
</script>


</body>
</html>